import React, { Component } from 'react'
import {
    StyleSheet,
    Text,
    View,
    Image,
    PanResponder
} from 'react-native';

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
//组件默认高度
const mWidth = -400

export default class AnimatedTest extends Component {

    constructor (props) {
        super(props)
        this.state = {
            bottom : mWidth,
            isTB: "bottom"
        }
        this.s = "none"
    }

    componentWillMount(evt, gestureState) {
        this._panResponder = PanResponder.create({
            onStartShouldSetPanResponder: (evt, gestureState) => {
                return true;
            },
            onMoveShouldSetPanResponder:  (evt, gestureState) => {
                return true;
            },
            onPanResponderGrant: (evt, gestureState) => {
                //开始移动
                this.s = "none"
            },
            onPanResponderMove: (evt, gestureState) => {
                let theTB = mWidth
                if(this.state.isTB=="top"){
                    theTB = 0
                }
                let temp = theTB - gestureState.dy
                if(gestureState.dy>=70){
                    this.s = "down"
                }else if(gestureState.dy<=-70){
                    this.s = "up"
                }else{
                    this.s = "none"
                }
                if(temp<=mWidth)temp = mWidth//不能超过最低
                if(temp>=0) temp = 0//不能高过最高
                this.setState({
                    bottom : temp
                })
            },
            onPanResponderRelease: (evt, gestureState) => {
                //停止移动
                if(this.s=="up"){
                    this.setState({
                        bottom : 0,
                        isTB: "top"
                    })
                }else if(this.s=="down"){
                    this.setState({
                        bottom : mWidth,
                        isTB: "bottom"
                    })
                }
            },
            onPanResponderTerminate: (evt, gestureState) => {
                //console.log("2")
            },
        });
    }

    render() {
        return (
            <View style={styles.container}  >
                <View style={styles.top}>
                    <Text>ttt</Text>

                </View>
                <View {...this._panResponder.panHandlers} style={[styles.bottom, { 
                    height: height - 90, 
                    width: width * 1,
                    bottom: this.state.bottom
                    }]}>
                    <Text>ggg</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        position: 'relative',
    },
    top: {
        padding: 20,
    },
    bottom: {
        backgroundColor: "pink",
        position: 'absolute',
        padding: 20,
    }

});